# Display Extended Fields

**Category:** Features/Enrich/Data Extension

## Guide

This guide explains how to display extended fields in your table.

By the end, you'll see your extended fields when you click **Customize**:

![Customize button](./data-extension-customize-columns.png)

### Before you begin

Make sure that you have:

* A Patterns [`Table`](./?path=%2Fstory%2Fbase-components-collections-table-table--table) component.
* A server configured to [support data extensions](https://dev.wix.com/docs/rnd-general/articles/open-platform/data-extensions/data-extensions-101#backend).

### Step 1 | Enable the Data Extension feature

The Data Extension feature enables you to add various components throughout your Patterns project to add, edit, and manage custom fields.

To enable the Data Extension feature:

1. Import `DataExtension`.

    ```javascript
    import { DataExtension } from '@wix/patterns';
    ```

1. Specify the `FQDN` of your extendable entity in the `useTableCollection` hook.

    ```diff
    const state = useTableCollection({
    +   fqdn: '',
        // ...
    });
    ```

1. Pass a `DataExtension` component to the `dataExtension` prop on the table.

    ```diff
    
    ```

This step simply enabled the Data Extension features in your table. After the next step, you'll be able to add, show, reorder, and hide extended fields.

### Step 2 | Add, show, reorder, and hide extended fields

To add, show, reorder, and hide extended fields:

1. Add the [Custom Columns feature](./?path=/story/features-display-custom-columns--customcolumns).

    ```diff
    }
    +   customColumns={}
    />
    ```

1. Click on the **Customize** icon to control the display behavior of the columns.

Now, you have some functionality of extended fields in your table.

### Step 3 (Optional) | View extended fields from the entity page

To add an extra view of extended fields in the entity page:

1. Add `CustomFieldsViewWidget` to your entity page with the `extendedFields` and `fqdn` props. Our guidelines is that `CustomFieldsViewWidget` should take 1/3 of the page width.

    ```diff
      import { MyEntityCard } from '../components/MyEntityCard';
      import { MyEntity } from '@wix/ambassador-v1-entity/types';
    + import { CustomFieldsViewWidget } from '@wix/patterns';
    
      function MyPageContent({ entity }: { entity: MyEntity }) {
        return (
            
              
                
                  
                
    +           
    +             " />
    +           
              
            
        );
      }
    ```

1. Check out your entity page to see all of your extended fields.

    ![Custom fields view widget](./custom-fields-view-widget.png)

### See also

* [Data Extension Overview](./?path=/story/features-enrich-data-extension--data-extension-overview)
* [Enable Filters for Extended Fields](./?path=/story/features-enrich-data-extension--enable-filters-for-extended-fields)
* [Allow Users to Add Extended Fields](./?path=/story/features-enrich-data-extension--allow-users-to-add-extended-fields)


## Examples

### Display Extended Fields

This example demonstrates how to display extended fields in your table.

```tsx
/* eslint-disable import/no-extraneous-dependencies */

import React from 'react';

import { CollectionPage } from '@wix/patterns/page';
import { Table, useTableCollection, DataExtension } from '@wix/patterns';
import { queryContacts } from '@wix/ambassador-contacts-v4-contact/http';
import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
import { useHttpClient } from '@wix/yoshi-flow-bm';

function Basic() {
  const httpClient = useHttpClient();

  const state = useTableCollection<Contact>({
    queryName: 'contacts-CustomFields',
    paginationMode: 'offset',
    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
    fetchData: (query) => {
      const { limit, offset, search, filters } = query;
      return httpClient
        .request(
          queryContacts({
            query: { paging: { limit, offset }, filter: filters },
            search,
          }),
        )
        .then(({ data: { contacts, pagingMetadata } }) => ({
          items: contacts || [],
          total: pagingMetadata?.total,
        }));
    },
    itemKey: (item: Contact) => item.id!,
    itemName: (item: Contact) => item.name!,
    fetchErrorMessage: () => 'Error fetching contacts',
    filters: {},
  });

  return (
    <CollectionPage height="400px">
      <CollectionPage.Header title={{ text: 'Contacts' }} />
      <CollectionPage.Content>
        <Table
          state={state}
          dataExtension={<DataExtension />}
          horizontalScroll
          columns={[
            {
              id: 'name',
              title: 'Name',
              width: '250px',
              render: (contact: any) => contact.name,
            },
          ]}
        />
      </CollectionPage.Content>
    </CollectionPage>
  );
}
```

---

### Entity with Personally Identifiable Information (PII)

Some entities contain personal data and are inherently considered PII. For example, 'Contacts'. Marking your entity as containing PII will add a toggle option in the new custom field modal, allowing users to designate fields as PII.

```tsx
import React from 'react';
import { CollectionPage } from '@wix/patterns/page';
import {
  DataExtension,
  useTableCollection,
  Table,
  CursorQuery,
} from '@wix/patterns';
import {
  Contact,
  SearchContactsRequest,
} from '@wix/ambassador-contacts-v5-contact/types';
import { searchContacts } from '@wix/ambassador-contacts-v5-contact/http';
import { useHttpClient } from '@wix/yoshi-flow-bm';

function ContainPii() {
  const httpClient = useHttpClient();

  const state = useTableCollection<Contact>({
    queryName: 'contacts-ContainPii',
    paginationMode: 'cursor',
    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
    toExtendedFields: (item) => item.extendedFields,
    persistQueryToUrl: true,

    fetchData: async ({ search = '', cursor, limit }: CursorQuery) => {
      const querySearch: SearchContactsRequest = {
        search: {
          search: { expression: search, fields: ['name'] },
          cursorPaging: { limit, cursor },
        },
      };
      return await httpClient
        .request(searchContacts(querySearch))
        .then(({ data: { contacts, pagingMetadata } }) => ({
          items: contacts || [],
          total: pagingMetadata?.total,
          cursor: pagingMetadata?.cursors?.next,
        }));
    },
    fetchErrorMessage: ({ err }) => `Error: ${err}`,
    itemKey: (item) => item.id!,
    itemName: (item) => item.name?.first || '',
  });

  return (
    <CollectionPage height="400px">
      <CollectionPage.Header title={{ text: 'Contacts' }} />
      <CollectionPage.Content>
        <Table
          state={state}
          horizontalScroll
          dataExtension={<DataExtension containsPii />}
          columns={[
            {
              id: 'name',
              title: 'Name',
              width: '250px',
              render: (item) => item.name,
            },
          ]}
        />
      </CollectionPage.Content>
    </CollectionPage>
  );
}
```